// jQuery zepto vue angular 等库皆有 progress 的实现 以jQuery为例：
$(function(){
  var $key = $('#key');  // file name    eg: the file is image.jpg,but $key='a.jpg', you will upload the file named 'a.jpg'
  var $userfile = $('#userfile');  // the file you selected

  var domain = "http://storage.yunspace.com.cn/";
  // upload info
  var $selectedFile = $('.selected-file');
  var $progress = $(".progress");
  var $uploadedResult = $('.uploaded-result');

  $("#userfile").change(function() {  // you can ues 'onchange' here to uplpad automatically after select a file
    $uploadedResult.html('');
    var selectedFile = $userfile.val();
    if (selectedFile) {
        $.loading(true);
      var files = selectedFile.replace(/\\/, "|").replace(/\\/, "|").split("|");
      // randomly generate the final file name
        var ramdomName = Math.random().toString(36).substr(2) + $userfile.val().match(/\.?[^.\/]+$/);
        if ($("#userfilename").val() != "") {
            ramdomName = $("#userfilename").val() + files[files.length - 1];
        }
      $key.val(ramdomName);
      $selectedFile.html('文件：' + selectedFile);
      $("#userfilename").val(files[files.length - 1]);
    } else {
        return false;
    }
    var f = new FormData(document.getElementById("testform"));
    // debugger;

    $.ajax({
      url: 'http://upload.qiniu.com/',  // Different bucket zone has different upload url, you can get right url by the browser error massage when uploading a file with wrong upload url.
      type: 'POST',
      data: f,
      processData: false,
      contentType: false,
      xhr: function(){
        myXhr = $.ajaxSettings.xhr();  
        if(myXhr.upload){
          myXhr.upload.addEventListener('progress',function(e) {
            // console.log(e);
            if (e.lengthComputable) {
              var percent = e.loaded/e.total*100;
              $progress.html('上传：' + e.loaded + "/" + e.total+" bytes. " + percent.toFixed(2) + "%");
            }
          }, false);
        }
        return myXhr;
      },
      success: function(res) {
          console.log("成功：" + JSON.stringify(res));
        var str = '<span>已上传：' + res.key + '</span>';
        if (res.key && res.key.match(/\.(jpg|jpeg|png|gif)$/)) {
          str += '<img src="' + domain + res.key + '"/>';
        }
        $("#userfilepath").val(domain + res.key);
        //$uploadedResult.html(str);

        $.modalMsg("文件上传成功！", "success");
        $.loading(false);
      },
        error: function (res) {
            console.log("失败:" + JSON.stringify(res));
            var messages = eval("(" + res.responseText + ")");
            if (messages.error == "file exists") {
                $.modalMsg('上传失败：有重名文件,请修改文件名后再次上传！', "error");
            } else {
                //$uploadedResult.html('上传失败：' + res.responseText);
                $.modalMsg('上传失败：' + res.responseText, "error");
            }
        $.loading(false);
      }
    });
    return false;
  });
});